<template>
  <div class="el-dialog-div" ref="formBox">
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
      <el-form-item label="UID" prop="userId">
        <el-input v-model.number="form.userId" :disabled="true" />
      </el-form-item>
      <el-form-item label="用户手机号" prop="userPhone">
        <el-input v-model.number="form.userPhone" :disabled="true" />
      </el-form-item>
      <el-form-item label="奖品昵称" prop="goodsName">
        <el-input v-model.number="form.goodsName" :disabled="true" />
      </el-form-item>
      <!-- <el-form-item label="奖品类型" prop="type">
        <el-select v-model="form.status" placeholder="奖品类型" clearable style="width: 100%" disabled>
          <el-option v-for="dict in typeList" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="收货姓名" prop="pickUpName">
        <el-input v-model="form.pickUpName" />
      </el-form-item>
      <el-form-item label="收货电话" prop="pickUpPhone">
        <el-input v-model.number="form.pickUpPhone" />
      </el-form-item>
      <el-form-item label="收货地址" prop="pickUpAddress">
        <el-input type="textarea" :rows="2" v-model="form.pickUpAddress" />
      </el-form-item>
      <el-form-item label="发货状态" prop="sendState">
        <el-select v-model="form.sendState" placeholder="发货状态" clearable style="width: 100%">
          <el-option v-for="dict in prizePickGoodesEnum" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.trackingNumber || form.sendState==2" label="物流公司" prop="sendState">
        <el-select v-model="form.trackingType" placeholder="物流公司" clearable style="width: 100%">
          <el-option v-for="dict in logistcsType" :key="dict.type" :label="dict.name" :value="dict.type" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.trackingNumber || form.sendState==2" label="快递单号" prop="trackingNumber">
        <el-input v-model.trim="form.trackingNumber" oninput="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')" maxlength="28" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'FormView',
  props: {
    form: {
      type: Object,
    },
    prizePickGoodesEnum: {
      type: Array
    },

    typeList: {
      type: Array
    },

    logistcsType: {
      type: Array
    }
  },
  watch: {
    "form.sendState": {
      deep: true,
      handler: function (newV, oldV) {
        this.scrollToBottom();
      },
    },
  },

  data() {
    return {
      rules: {
        pickUpAddress: [{ required: true, message: "必填", trigger: "blur" }],//提货地址
        pickUpName: [{ required: true, message: "必填", trigger: "blur" }],//提货收货人
        pickUpPhone: [{ required: true, message: "必填", trigger: "blur" }],//提货收货人电话
        sendState: [{ required: true, message: "必填", trigger: "blur" }],//提货状态
        // trackingNumber: [{ required: true, message: "必填", trigger: "blur" }],//快递单号
      },
    }
  },
  mounted() {
  },
  methods: {

    scrollToBottom() {

      this.$nextTick(() => {
        var container = this.$refs.formBox;
        container.scrollTop = container.scrollHeight;
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.el-dialog-div {
  height: 70vh;
  overflow: auto;
  padding-right: 30px;
}
</style>
